<template>

    <echart :options="option" class="echarts"></echart>

</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var station = [
  "常熟路",
  "陕西南路",
  "人民广场",
  "汉中路",
  "徐家汇",
  "漕宝路",
  "上海南站",
  "莘庄"
];
var number = [230, 210, 200, 175, 160, 150, 120, 100];
export default {
  data: function() {
    return {
      option: {
        title: {
          text: "车站故障总览                           ",
          left: "8%",
          top: "1%",
          textStyle: {
              color: "#eedfbe",
            },
          backgroundColor: "#0a3c60"
        },
        backgroundColor: "#0D2A42",
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "18%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: station,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: "#0177d4"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 14
            }
          }
        ],
        yAxis: [
          {
            name: "（数量）",
            type: "value",
            nameTextStyle: {
              color: "#fff",
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                color: "#0177d4"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 16
            }
          }
        ],
        series: [
          {
            name: "站点",
            type: "bar",
            barWidth: "60%",
            data: number
          }
        ]
      }
    };
  }
};
</script>
